<template>
	<view class="content">
		<u-notice-bar :text="text1"></u-notice-bar>
		<view class="check_name">
			<view style="padding: 30rpx;">
				<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
					<u-form-item label="姓名" prop="name" borderBottom ref="item1">
						<u--input placeholder='请输入姓名' v-model="userInfo.name" border="none"></u--input>
					</u-form-item>
					<u-form-item label="手机" prop="phone" borderBottom ref="item1">
						<u--input placeholder='请输入手机号' v-model="userInfo.phone" border="none"></u--input>
					</u-form-item>
					<u-form-item label="工号" prop="jobNumber" borderBottom ref="item1">
						<u--input v-model="userInfo.jobNumber" placeholder='请输入工号' border="none"></u--input>
					</u-form-item>
					<text class="gonghao">注：航产籍员工必须填写工号</text>
				</u--form>
			</view>

		</view>
		<u-button :customStyle="customStyles" type='success' shape='circle' @click="submit">提交</u-button>
	</view>
</template>

<script>
	import user from '@/api/user.js'
	export default {
		data() {
			return {
				text1: "注意认证之后不可修改，请谨慎修改",
				userInfo: {
					jobNumber: '',
					name: '',
					phone: ''
				},
				customStyles: {
					position: 'fixed',
					bottom: '166rpx',
					left: '58rpx',
					width: '634rpx',
				},
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'phone': {
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			submit() {
				// 获取表单数据
				let data = {
					id: uni.getStorageSync("data").data.userInfo.id,
					name: this.userInfo.name,
					mobile: this.userInfo.phone,
					jobNumber: this.userInfo.jobNumber
				};
				console.log(data);
				// 校验 name 和 phone 的非空
				if (!data.name || !data.mobile) {
					uni.$u.toast('姓名和手机号不能为空');
					return;
				}

				// 校验手机号格式（简单的正则表达式示例）
				const phoneRegex = /^[1][3-9][0-9]{9}$/; // 
				if (!phoneRegex.test(data.mobile)) {
					uni.$u.toast('请输入有效的手机号');
					return;
				}

				// 调用 user.userAuth 方法进行提交
				user.userAuth(data).then(res => {
					console.log(res);
					if(res.code == 0 ){
						uni.$u.toast('认证成功');
						setTimeout(()=>{
							uni.navigateBack(-1)
						},1000)
					}else{
						uni.$u.toast(res.msg);
					}
					// 根据需要进行其他处理
				})
			}

		}
	}
</script>

<style lang="scss">
	.add {
		position: sticky;
		bottom: 40rpx;
	}

	.gonghao {
		width: 312rpx;
		height: 34rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FF0000;
		line-height: 34rpx;
		margin-top: 40rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.check_name {
		margin: auto;
		margin-bottom: 40rpx;
		width: 710rpx;
		height: 912rpx;
		border-radius: 20rpx;
		background: #fff;
	}
</style>